<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录界面</title>
		<link rel="stylesheet" type="text/css" href="css/element.css" />
		<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" src="js/jquery.cookie.js"></script>
		<script src="js/element.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style>
		#app{
			width: 78%;
			margin: 0 auto;
		}
		
		#login-container{
			width: 500px;
			float: right;
			border: 1px solid #F5F5F5;
			height: 450px;
			margin-top: 100px;
		}
		#login-container .el-tabs .el-tabs__content{
			height: 100%;
		}
		
		#login-container .el-tabs .el-tabs__content input{
			border-radius: 0;
		}
		#login-container .el-tabs .el-tabs__content .el-form{
			margin-top: 20px;
		}
		#login-container .el-tabs .el-tabs__content .el-form .el-form-item .el-form-item__content .el-button{
			width: 100%;
			border-radius: 0;
		}
		#login-container .el-tabs .el-tabs__content .el-form .el-form-item .el-form-item__content .el-input-group .el-input-group__append{
			background-color: #C2E7B0;
			color: #FFFFFF;
		}
	</style>
	<body>
		<div id="app">
			<div id="login-container">
				<el-tabs type="border-card">
					<el-tab-pane label="密码登录">
						<div style="height: 400px;">
							<div style="width: 78%;margin: 0 auto; height: 78%;">
								<div style="margin-top: 50px;">
									<span style="color: #D58512;font-size: 23px;">密码登录</span>
								</div>
								<el-form :model="account" :rules="rules" label-position="left" ref="account" label-width="0px" class="demo-ruleForm">
									<el-form-item prop="loginField">
										<el-input v-model="account.loginField" placeholder="用户名/密码/电话"></el-input>
									</el-form-item>
									<el-form-item prop="password">
										<el-input v-model="account.password" show-password placeholder="密码"></el-input>
									</el-form-item>
									<el-form-item>
										<el-button type="primary" @click="accountLogin(mobile)">登录</el-button>
									</el-form-item>
								</el-form>
								<div style="text-align: right;">
									<a href="#">忘记密码</a>&nbsp;&nbsp;<a href="#">免费注册</a>
								</div>
							</div>
						</div>
					</el-tab-pane>
					<el-tab-pane label="手机登录">
						<div style="height: 400px;">
							<div style="width: 78%;margin: 0 auto; height: 78%;">
								<div style="margin-top: 50px;">
									<span style="color: #D58512;font-size: 23px;">手机登录</span>
								</div>
								<el-form :model="mobile" :rules="rules" label-position="left" ref="mobile" label-width="0px" class="demo-ruleForm">
									<el-form-item prop="tel">
										<el-input v-model="mobile.tel" placeholder="手机号"></el-input>
									</el-form-item>
									<el-form-item prop="code">
										<el-input placeholder="验证码" v-model="mobile.code">
											<el-button slot="append" :disabled="safety.state" @click="getLoginCode()">{{safety.state?safety.time + 's':'获取验证码'}}</el-button>
										</el-input>
									</el-form-item>
									<el-form-item>
										<el-button type="primary" @click="mobileLogin(account)">登录</el-button>
									</el-form-item>
								</el-form>
								<div style="text-align: right;">
									<a href="#">忘记密码</a>&nbsp;&nbsp;<a href="#">免费注册</a>
								</div>
							</div>
						</div>
					</el-tab-pane>
				</el-tabs>
			</div>
		</div>

		<script>
            var zullstr=""
			var app = new Vue({
						el: "#app",
						data: {
							// 验证码
							safety: {
							  time: 60,
							  state: false,
							  interval: ''
							},
							
							account: {
								loginField: "",
								password: "",
							},
							mobile: {
								tel: '',
								code: ''
							},

							// 表单校验
							rules: {
								loginField: [{
										required: true,
										message: '账号不能为空',
										trigger: 'blur'
									},

								],
								password: [{
									required: true,
									message: '密码不能为空',
									trigger: 'blur'
								}],
								tel: [{
									required: true,
									message: '手机号不能为空',
									trigger: 'blur'
								}],
								code: [{
									required: true,
									message: '验证码不能为空',
									trigger: 'blur'
								}],
							}
						},
						created: function() {

						},
						methods: {
							// 账号登录
							accountLogin: function(formName) {

								
								var _this = this;


								$.ajax({ beforeSend: function (request) {
                                        request.setRequestHeader("auth_token", $.cookie("auth_token"));},
									url:zullstr+ "http://localhost:8000/user-coach/login/loginByPassword",
									type: "post",
									data: _this.account,
									dataType: "json",
									header: {
										'Content-type': 'application/x-www-form-urlencoded'
									},
									success(data) {
										console.log(data);
										if (data.code == 200) {
											console.log("登录成功");
											_this.viewMsg("success", data.message);
										} else {
											_this.viewMsg("warning", data.message);
										}
									},
									error(data) {
										_this.viewMsg("error", "服务器繁忙!")
									}
								});
								
							},
							// 手机验证码登录
							mobileLogin:function(formName){
								
								// 手机验证码登录
									var _this = this;
									$.ajax({ beforeSend: function (request) {
                                            request.setRequestHeader("auth_token", $.cookie("auth_token"));},
										url:zullstr+ "http://localhost:8000/user-coach/login/loginByTelCode",
										type: "post",
										data: _this.mobile,
										dataType: "json",
										header: {
											'Content-type': 'application/x-www-form-urlencoded'
										},
										success(data) {
											console.log(data);
											if (data.code == 200) {
												console.log("登录成功");
												_this.viewMsg("success", data.message);
											} else {
												_this.viewMsg("warning", data.message);
											}
										},
										error(data) {
											_this.viewMsg("error", "服务器繁忙!")
										}
									});
							},
							
							// 获取验证码
							getLoginCode: function() {
								var _this = this;
								// 成功后显示倒计时60s后可在点击
									this.safety.state = true;
								  // 倒计时
								  this.safety.interval = setInterval(() => {
								    if (this.safety.time-- <= 0) {
								      this.safety.time = 60;
								      this.safety.state = false;
								      clearInterval(this.safety.interval);
								    }
								  }, 1000);
								
								
								$.ajax({ beforeSend: function (request) {
                                        request.setRequestHeader("auth_token", $.cookie("auth_token"));},
									url: zullstr+"http://localhost:8000/user-coach/login/getLoginCode",
									data: _this.mobile,
									dataType: "json",
									header: {
										'Content-type': 'application/x-www-form-urlencoded'
									},
									type: "POST",
									success:function(data) {
										console.log(data);

										if (data.code == 200) {
											_this.viewMsg("success",data.message);
										} else {
											_this.viewMsg("info",data.message);
										}
									},
									error:function(data){
										_this.viewMsg("error","服务器繁忙!");
									}
								});
								this.viewMsg("success", "已发送请求!");
							},
								// 封装的消息提示  success warning info  error
								viewMsg: function(type, message) {
										this.$message({
											type: type,
											message: message
										});
									},

							},
							

							watch: {

							}
						});
		</script>
	</body>


</html>
